不知道如何提升自己網頁的吸引力嗎？背景動畫是網頁設計吸引用戶注意的元素之一。本文將介紹以 SCSS 製作不同的背景動畫，包含顏色漸變、閃爍效果，提升頁面的豐富度抓住使用者的目光。就讓我們開始這次的旅程吧！
這次的實作依賴於 Bootstrap 5，可以根據需要進行任何必要的調整及修正。
Ryan秘密收藏夾
<body class="min-vh-100 d-flex align-items-center">
<div class="sky">
<div class="star" id="planet-1"></div>
<div class="star" id="planet-2"></div>
<div class="star" id="planet-3"></div>
</div>
<div class="container">
<!-- 網站主要內容 -->
</div>
</body>
首先，製作一個天空漸層背景並將天空背景整個放大，透過移動背景的位置就會有顏色流動變化。$sky-color：天空漸層圖，可以挑選自己喜歡的色號。@keyframes twilight：背景移動的路徑，根據天空漸層圖做合適的移動。
$sky-color: linear-gradient(
168deg,
#090c10 0%,
#0a1a2e 30%,
#253950 50%,
#1f4471 80%,
#1a5389 100%
);
@keyframes twilight {
0% {
background-position: 0% 0%;
}
60% {
background-position: 40% 60%;
}
100% {
background-position: 100% 60%;
}
}
.sky {
position: absolute;
width: 100%;
height: 100%;
background: $sky-color;
background-size: 400%;
animation: twilight 20s infinite alternate;
animation-timing-function: linear;
}
在 HTML 結構中我們已經建立了數個.star的標籤，.star用於定義星星的共同特性。接下來，使用 SCSS 為每顆.star#planet-x設定獨特的屬性，包括大小、位置和亮度。$star-amount：決定星星的數量。要特別注意跟.star#planet-x標籤數配合。@keyframes twinkle：改變星星的透明度，達到閃爍效果。
$star-amount: 3
@mixin star($index) {
$size: random(3) + 1px;
#planet-#{$index} {
width: $size;
height: $size;
left: random(98) + vw;
top: random(98) + vh;
opacity: random(2) * 0.1;
animation-delay: random(10) * 0.1s;
}
}
@keyframes twinkle {
to {
opacity: 1;
}
}
.sky {
// ...
.star {
position: absolute;
background-color: white;
border-radius: 50%;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
animation: twinkle 1s infinite alternate;
animation-timing-function: ease-in-out;
}
@for $i from 1 through $star-amount {
@include star($i);
}
}
現在，您已經學會了如何製作小星星背景動畫，根據個人喜好進行調整，創造屬於自己的星空吧！也可以透過連結查看最終效果。
iThome鐵人賽
看影片追技術